<template>
  <div class="content">
    <div class="mlr1">
      <hr class="bk" />
      <div v-for="item in dabiaoti" :key="item.shiliao_id">
        <h2 class="bt">{{ item.dleixing }}</h2>
        <div class="dbk">
          <ul class="bdk">
            <li v-for="p in data1[item.shiliao_id]" :key="p.leixing_id"
             @click="$router.push(`/tongyong1?type=${p.xleixing}&type1=${item.dleixing}`)">
              <div>{{ p.xleixing }}</div>
              <span>|</span>
            </li>
            <br/>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dabiaoti: null,
      data1:[],
    };
  },
  mounted() {
    this.DaBiaoTi();
    this.XiaoBiaoTi(0);
  },
  methods: {
    DaBiaoTi() {
      let url = "http://127.0.0.1:3000/v1/Jiankangshiliao/dalei";
      this.axios.get(url).then((res) => {
        console.log("四个大分类", res);
        this.dabiaoti = res.data.data;
      });
    },
    XiaoBiaoTi(n) {
      if(n == 5){
        return;
      }
      let url = `http://127.0.0.1:3000/v1/Jiankangshiliao/xiaolei/${n}`;
      this.axios.get(url).then((res) => {
        this.data1.push(res.data.data);
        this.XiaoBiaoTi(++n);
         console.log("小分类", res.data.data);
      });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  padding-top: 6px;
  padding-bottom: 12px;
}
.mlr1 {
  margin: 0 10px 0 10px;
}
.bk {
  height: 1px;
  border: 0;
  border-top: 1px solid #eae6e3;
  line-height: 0;
  font-size: 0;
  margin-top: 14px;
}
.bt {
  padding-top: 9px;
  padding-bottom: 4px;
  height: 20px;
  color: #817c74;
  font-size: 100%;
  line-height: normal;
  font-weight: 300;
  text-align: center;
}
.dbk {
  border: 1px solid #eae6e3;
  background-color: #fff;
}
.dbk {
  list-style: none;
  font-size: 14px;
}
.dbk li {
  display: inline-block;
}
.dbk li div {
  padding: 0 18px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #000;
  display: inline-block;
}
.dbk li span {
  color: #eae6e3;
}
</style>